<template>
  <div class="goods">
    <div class="fanhui">
      <i class="iconfont icon-fanhui" @click="back"></i>
    </div>
    <div class="info_list">
      <div class="info_list_left" ref="leftRef">
        <div
          @click="categoryActive(index)"
          class="left_nav"
          :class="current_left == index ? 'left_nav_active' : ''"
          v-for="(item, index) in categoryList"
          :key="index"
        >
          <el-badge :value="item.total" class="item" v-if="item.total != 0"></el-badge>
          <ul style="list-style-type: none">
            <li>{{ item.categoryName }}</li>
          </ul>
        </div>
      </div>
      <div class="info_list_right" ref="rightRef">
        <div class="right_list">
          <div class="right_item" v-for="(item, index) in categoryList" :key="index">
            <div class="item_title" v-if="item.dishDtoList.length != 0">
              <span>{{ item.categoryName }}</span>
            </div>
            <div class="item_dish" v-for="(it, ind) in item.dishDtoList" :key="ind" @click="goDish(index, ind)">
              <div class="dish_left">
                <el-image :src="it.dishImage" fit="cover"></el-image>
              </div>
              <div class="dish_right">
                <div class="right_title">
                  <span>{{ it.dishName }}</span>
                </div>
                <div class="right_sale">
                  <span>月售{{ it.rate }}</span>
                </div>
                <div class="right_price">
                  <span class="dishPrice">￥{{ it.dishPrice }}</span>
                  <span class="oldPrice" v-if="it.oldPrice != null">￥{{ it.oldPrice }}</span>
                </div>
                <div class="right_button" v-if="it.dishFlavore.length != 0">
                  <div class="right_button_1" @click.stop="addShop(index, ind)" v-if="it.chooseNumber == 0 || it.chooseNumber == null">
                    <span>选规格</span>
                  </div>
                  <div v-if="it.chooseNumber != 0 && it.chooseNumber != null" class="right_button_2">
                    <i class="iconfont icon-jianshao" @click.stop="decrease(it)"></i>
                    <span>{{ it.chooseNumber }}</span>
                    <i class="iconfont icon-tianjia1 icon" @click.stop="add($event, it)" ref="addRef"></i>
                  </div>
                </div>
                <div class="right_count" v-if="it.dishFlavore.length == 0">
                  <i v-if="it.chooseNumber != 0 && it.chooseNumber != null" class="iconfont icon-jianshao" @click.stop="decrease(it)"></i>
                  <span v-if="it.chooseNumber != 0 && it.chooseNumber != null">{{ it.chooseNumber }}</span>
                  <i class="iconfont icon-tianjia1 icon" @click.stop="add($event, it)" ref="addRef"></i>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="cart" ref="cartRef">
      <div class="cart_left" @click="showShppingCart = true">
        <el-badge :value="shoppingCartTatal" class="item" v-if="shoppingCartTatal != 0"></el-badge>
        <img src="../../img/cart.png" alt="" v-if="shoppingCartTatal == 0" />
        <img src="../../img/cart_active.png" alt="" v-if="shoppingCartTatal != 0" />
      </div>
      <div class="cart_middle" @click="showShppingCart = true">
        <div class="middle_top">
          <span>￥{{ totalPrice }}</span>
        </div>
        <div class="middle_bottom">
          <span>另需配送费￥{{ shopInfo.delivery }}</span>
        </div>
      </div>
      <div class="cart_right">
        <div class="right" v-if="!showOrder">
          <span>差￥{{ difference }}起送</span>
        </div>
        <div class="right_active" v-if="showOrder" @click="placeOrders">
          <span>去下单</span>
        </div>
      </div>
    </div>
    <div class="dialog" v-if="addDiolog">
      <div class="el-dialog">
        <el-dialog :show-close="false" :title="categoryList[index].dishDtoList[ind].dishName" :visible.sync="addDiolog" width="350px">
          <div class="dialog_item" v-for="(item, index) in categoryList[index].dishDtoList[ind].dishFlavore" :key="index">
            <div>
              <div class="dialog_item_title">
                <span>{{ item.name }}</span>
              </div>
              <div class="dialog_item_info">
                <div
                  @click="tagClick(it, index, $event, ind)"
                  v-for="(it, ind) in item.value"
                  :key="ind"
                  :class="subIndex[index] == ind ? 'info_tag_active' : 'info_tag'"
                >
                  <el-tag>{{ it }}</el-tag>
                </div>
              </div>
            </div>
          </div>
          <div slot="footer" class="footer">
            <div class="footer_price">
              <span class="span_1">总计</span>
              <span class="span_2">￥</span>
              <span
                class="span_3"
                v-if="categoryList[index].dishDtoList[ind].amount == 0 || categoryList[index].dishDtoList[ind].chooseNumber == null"
                >{{ categoryList[index].dishDtoList[ind].dishPrice }}</span
              >
              <span
                class="span_3"
                v-if="categoryList[index].dishDtoList[ind].amount != 0 && categoryList[index].dishDtoList[ind].chooseNumber != null"
                >{{ categoryList[index].dishDtoList[ind].amount }}</span
              >
            </div>
            <div class="footer_button">
              <div
                class="footer_button_1"
                @click="add($event, categoryList[index].dishDtoList[ind])"
                v-if="categoryList[index].dishDtoList[ind].chooseNumber == 0 || categoryList[index].dishDtoList[ind].chooseNumber == null"
              >
                <span>+</span>
                <span>加入购物车</span>
              </div>
              <div
                class="footer_button_2"
                v-if="categoryList[index].dishDtoList[ind].chooseNumber != 0 && categoryList[index].dishDtoList[ind].chooseNumber != null"
              >
                <i class="iconfont icon-jianshao" @click="decrease(categoryList[index].dishDtoList[ind])"></i>
                <span>{{ categoryList[index].dishDtoList[ind].chooseNumber }}</span>
                <i class="iconfont icon-tianjia1 icon" @click="add($event, categoryList[index].dishDtoList[ind])" ref="addRef"></i>
              </div>
            </div>
            <div class="close" @click="closeDialog">
              <span>×</span>
            </div>
          </div>
        </el-dialog>
      </div>
    </div>
    <div class="shoppingCart" v-if="showShppingCart">
      <div class="shoppingCart_top" @click="closeShoppingCart"></div>
      <div class="shoppingCart_bottom">
        <div class="bottom_top"></div>
        <div class="bottom_bottom">
          <div class="bottom_middle">
            <div class="middle_left">
              <span>购物车</span>
            </div>
            <div class="middle_right" @click="delShoppingCart">
              <i class="iconfont icon-shanchu"></i>
              <span>清空购物车</span>
            </div>
          </div>
          <div class="bottom_info">
            <div class="info_item" v-for="(item, index) in shoppingCartList" :key="index">
              <div class="item_left">
                <el-image :src="item.dishImage" fit="cover"></el-image>
              </div>
              <div class="item_right">
                <div class="item_right_title">
                  <span>{{ item.dishName }}</span>
                </div>
                <div class="item_right_flavore">
                  <span v-for="(it, ind) in item.flavore" :key="ind">{{ it }}</span>
                </div>
                <div class="item_right_price">
                  <span class="amountPrice">￥{{ item.amount }}</span>
                </div>
                <div class="item_right_count">
                  <i class="iconfont icon-jianshao" @click="decrease(item)"></i>
                  <span>{{ item.chooseNumber }}</span>
                  <i class="iconfont icon-tianjia1 icon" @click="add($event, item)" ref="addRef"></i>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import BScroll from 'better-scroll';
export default {
  data() {
    return {
      current_left: 0,
      categoryList: [],
      info: [],
      leftScroll: null,
      rightScroll: null,
      scrollY: 0,
      heightList: [],
      index: 0,
      addDiolog: false,
      ind: 0,
      selectArr: [],
      subIndex: [],
      tagActive: '',
      shoppingCartTatal: 0,
      totalPrice: 0,
      shoppingCartList: [],
      showShppingCart: false,
      showOrder: false,
      difference: 0,
      shoppingCartParams: [],
      shopId: '',
      shopInfo: [],
    };
  },

  mounted() {
    setTimeout(() => {
      this.initBetterScroll();
      this.catchHeight();
    }, 1000);
  },

  created() {
    this.shopId = this.$route.query.shopId;
    this.getShopInfo();
    this.info = JSON.parse(window.localStorage.getItem('userInfo'));
    this.getCategoryList();
  },

  methods: {
    back() {
      this.updateRedis();
      window.sessionStorage.removeItem('activePath');
      this.$router.push('/takeOut');
      if (this.shoppingCartList.length != 0) {
        localStorage.setItem(this.shopId, JSON.stringify(this.categoryList));
        localStorage.setItem(this.shopInfo.shopName, JSON.stringify(this.shopInfo));
      }
    },
    async getShopInfo() {
      var shop = [];
      const { data: res } = await this.$http.get('shop/getById/' + this.shopId);
      if (res.code == 1) {
        this.shopInfo = res.data;
        this.difference = this.shopInfo.start;
        shop = JSON.parse(localStorage.getItem(this.shopInfo.shopName));
        if (shop != null) {
          this.shopInfo = shop;

          localStorage.removeItem(this.shopInfo.shopName);
        }
        this.getOrderPrice();
        return;
      } else {
        return this.$message.error('信息获取失败');
      }
    },
    classActive(active) {
      this.navActive = active;
    },

    updateRedis() {
      for (let i = 0; i < this.categoryList.length; i++) {
        for (let j = 0; j < this.categoryList[i].dishDtoList.length; j++) {
          this.categoryList[i].dishDtoList[j].userId = this.info.id;
          for (let k = 0; k < this.categoryList[i].dishDtoList[j].dishFlavore.length; k++) {
            this.categoryList[i].dishDtoList[j].dishFlavore[k].value = JSON.stringify(this.categoryList[i].dishDtoList[j].dishFlavore[k].value);
          }
        }
      }
      this.$http.put('shoppingCart/updateRedis', this.categoryList);
      for (let i = 0; i < this.categoryList.length; i++) {
        for (let j = 0; j < this.categoryList[i].dishDtoList.length; j++) {
          for (let k = 0; k < this.categoryList[i].dishDtoList[j].dishFlavore.length; k++) {
            this.categoryList[i].dishDtoList[j].dishFlavore[k].value = JSON.parse(this.categoryList[i].dishDtoList[j].dishFlavore[k].value);
          }
        }
      }
    },
    async placeOrders() {
      for (let i = 0; i < this.shoppingCartList.length; i++) {
        this.shoppingCartParams.push({
          dishId: this.shoppingCartList[i].id,
          flavore: this.shoppingCartList[i].flavore,
          number: this.shoppingCartList[i].chooseNumber,
          amount: this.shoppingCartList[i].amount,
          userId: this.info.id,
          shopId: this.shoppingCartList[i].shopId,
          dishName: this.shoppingCartList[i].dishName,
          dishImage: this.shoppingCartList[i].dishImage,
          oldPrice: this.shoppingCartList[i].oldPrice,
        });
      }
      const { data: res } = await this.$http.post('shoppingCart/addShoppingCart', this.shoppingCartParams);
      if (res.code == 1) {
        this.updateRedis();
        this.$router.push({ path: '/pay', query: { shopInfo: this.shopInfo } });
      }
    },
    goDish(index, ind) {
      this.updateRedis();
      setTimeout(() => {
        this.$router.push({
          path: '/dishDetails',
          query: { shopInfo: this.shopInfo, index: index, ind: ind },
        });
      }, 100);
    },
    closeShoppingCart() {
      this.showShppingCart = false;
    },
    initBetterScroll() {
      // this.leftScroll = new BScroll(this.$refs.leftRef, {
      //   click: true,
      // });
      this.rightScroll = new BScroll(this.$refs.rightRef, {
        click: true,
        probeType: 2,
      });
      this.rightScroll.on('scroll', (position) => {
        this.scrollY = Math.abs(position.y);
        for (let i = 0; i < this.heightList.length - 1; i++) {
          var height1 = this.heightList[i];
          var height2 = this.heightList[i + 1];
          if (height1 <= this.scrollY && this.scrollY < height2) {
            this.current_left = i;
            return;
          }
        }
      });
    },
    catchHeight() {
      var foodsList = this.$refs.rightRef.getElementsByClassName('right_item');
      var height = 0;
      this.heightList.push(height);
      for (let i = 0; i < foodsList.length; i++) {
        var itemHeight = foodsList[i].clientHeight;
        height += itemHeight;
        this.heightList.push(height);
      }
    },
    add(e, dishDtoInfo) {
      const car = document.querySelector('.cart');
      const btn = e.target;
      const w = document.querySelector('.w');
      const PLUS_SIZE = 25;
      const div = document.createElement('div');
      div.className = 'plus';
      div.innerHTML = `<i class="iconfont icon-tianjia1"></i>`;
      const btnRect = btn.getBoundingClientRect();
      const carRect = car.getBoundingClientRect();
      const left = btnRect.left;
      const top = btnRect.top - 22;
      const x = carRect.left + carRect.width / 5 - PLUS_SIZE / 2 - left;
      const y = carRect.top - top - 10;
      div.style.setProperty('--left', `${left}px`);
      div.style.setProperty('--top', `${top}px`);
      div.style.setProperty('--x', `${x}px`);
      div.style.setProperty('--y', `${y}px`);
      div.addEventListener('animationend', () => {
        div.remove();
      });
      w.appendChild(div);
      this.increase(dishDtoInfo);
    },
    pushShoppingCart(dishDtoInfo) {
      var flag = false;
      if (this.shoppingCartList.length == 0) {
        this.shoppingCartList.push(dishDtoInfo);
      }
      for (let i = 0; i < this.shoppingCartList.length; i++) {
        if (this.shoppingCartList[i].id == dishDtoInfo.id) {
          //this.shoppingCartList[i] = dishDtoInfo;
          if (this.shoppingCartList[i].chooseNumber == 0) {
            this.shoppingCartList.splice(i, 1);
          }
          if (this.shoppingCartList.length == 0) {
            this.showShppingCart = false;
          }
          flag = false;
          return flag;
        } else {
          flag = true;
        }
      }
      if (flag) {
        this.shoppingCartList.push(dishDtoInfo);
      }
    },
    getOrderPrice() {
      if (this.totalPrice >= this.shopInfo.start) {
        this.showOrder = true;
      } else {
        this.showOrder = false;
      }
      this.difference = Math.abs(Math.formatFloat(this.totalPrice - this.shopInfo.start, 2));
    },
    delShoppingCart() {
      this.shoppingCartList.length = 0;
      this.showShppingCart = false;
      for (let i = 0; i < this.categoryList.length; i++) {
        this.categoryList[i].total = 0;
        for (let j = 0; j < this.categoryList[i].dishDtoList.length; j++) {
          this.categoryList[i].dishDtoList[j].chooseNumber = null;
          this.categoryList[i].dishDtoList[j].amount = null;
          this.categoryList[i].dishDtoList[j].flavore = null;
        }
      }
      this.shoppingCartTatal = 0;
      this.totalPrice = 0;
      this.showOrder = false;
      this.difference = Math.abs(Math.formatFloat(this.totalPrice - this.shopInfo.start, 2));
      this.$http.delete(`http://localhost:8080/school/shoppingCart/delShoppingCart?shopId=${this.shopInfo.id}&userId=${this.info.id}`);
      this.updateRedis();
    },
    increase(dishDtoInfo) {
      for (let i = 0; i < this.categoryList.length; i++) {
        for (let j = 0; j < this.categoryList[i].dishDtoList.length; j++) {
          if (this.categoryList[i].dishDtoList[j].id == dishDtoInfo.id) {
            this.categoryList[i].dishDtoList[j].chooseNumber++;
            if (this.selectArr.length != 0) {
              this.categoryList[i].dishDtoList[j].flavore = JSON.parse(JSON.stringify(this.selectArr.join('、')));
            }
            if (this.categoryList[i].dishDtoList[j].dishFlavore.length == 0) {
              this.categoryList[i].dishDtoList[j].flavore = '';
            }
            this.getAmountPrice(i, j);
            this.getTotal(i);
            this.getTotalPrice();
            this.pushShoppingCart(this.categoryList[i].dishDtoList[j]);
            this.getOrderPrice();
            this.$forceUpdate();
          }
        }
      }
    },
    getAmountPrice(i, j) {
      this.categoryList[i].dishDtoList[j].amount = Math.formatFloat(
        this.categoryList[i].dishDtoList[j].chooseNumber * this.categoryList[i].dishDtoList[j].dishPrice,
        2,
      );
    },
    getTotal(i) {
      var sum = 0;
      var sum1 = 0;
      for (let j = 0; j < this.categoryList[i].dishDtoList.length; j++) {
        sum = sum + this.categoryList[i].dishDtoList[j].chooseNumber;
      }
      this.categoryList[i].total = sum;
      for (let i = 0; i < this.categoryList.length; i++) {
        sum1 = sum1 + this.categoryList[i].total;
      }
      this.shoppingCartTatal = sum1;
    },
    getTotalPrice() {
      var sum = 0;
      for (let i = 0; i < this.categoryList.length; i++) {
        for (let j = 0; j < this.categoryList[i].dishDtoList.length; j++) {
          sum = sum + this.categoryList[i].dishDtoList[j].amount;
        }
      }
      this.totalPrice = Math.formatFloat(sum, 2);
    },
    decrease(dishDtoInfo) {
      for (let i = 0; i < this.categoryList.length; i++) {
        for (let j = 0; j < this.categoryList[i].dishDtoList.length; j++) {
          if (this.categoryList[i].dishDtoList[j].id == dishDtoInfo.id) {
            this.categoryList[i].dishDtoList[j].chooseNumber--;
            this.getAmountPrice(i, j);
            this.getTotal(i);
            this.getTotalPrice();
            this.pushShoppingCart(this.categoryList[i].dishDtoList[j]);
            this.getOrderPrice();
            this.$forceUpdate();
          }
        }
      }
    },
    addShop(index, ind) {
      this.addDiolog = true;
      this.index = index;
      this.ind = ind;
    },
    closeDialog() {
      this.addDiolog = false;
      this.selectArr.length = 0;
      this.subIndex.length = 0;
    },
    tagClick(it, index, event, ind) {
      if (this.selectArr[index] !== it) {
        this.selectArr[index] = it;
        this.subIndex[index] = ind;
      } else {
        this.selectArr[index] = '';
        this.subIndex[index] = -1;
      }
      this.checkItem();
    },
    checkItem() {
      var option = this.categoryList[this.index].dishDtoList[this.ind].dishFlavore;
      var result = [];
      for (let i in option) {
        result[i] = this.selectArr[i] ? this.selectArr[i] : '';
      }
      for (let i in option) {
        var last = result[i];
        for (let k in option[i].item) {
          result[i] = option[i].item[k].name;
        }
        result[i] = last;
      }
      this.$forceUpdate();
    },
    categoryActive(index) {
      this.current_left = index;
      var foodsList = this.$refs.rightRef.getElementsByClassName('right_item');
      var dom = foodsList[index];
      this.rightScroll.scrollToElement(dom, 300);
    },
    async getCategoryList() {
      const { data: res } = await this.$http.get(`http://localhost:8080/school/category/getByShopId?shopId=${this.shopId}&userId=${this.info.id}`);
      if (res.code == 1) {
        this.categoryList = res.data;
        for (let i = 0; i < this.categoryList.length; i++) {
          for (let j = 0; j < this.categoryList[i].dishDtoList.length; j++) {
            if (this.categoryList[i].dishDtoList[j].chooseNumber != 0 && this.categoryList[i].dishDtoList[j].chooseNumber != null) {
              this.getTotal(i);
              this.getTotalPrice();
              this.getOrderPrice();
              this.pushShoppingCart(this.categoryList[i].dishDtoList[j]);
            }
            for (let k = 0; k < this.categoryList[i].dishDtoList[j].dishFlavore.length; k++) {
              this.categoryList[i].dishDtoList[j].dishFlavore[k].value = JSON.parse(this.categoryList[i].dishDtoList[j].dishFlavore[k].value);
            }
          }
        }
        return;
      } else {
        return this.$message.error('信息获取失败');
      }
    },
  },
};
</script>

<style lang="scss">
.plus {
  position: fixed;
  left: var(--left);
  top: var(--top);
  z-index: 99999;
  height: 25px;
  width: 25px;
  display: flex;
  justify-content: center;
  align-items: center;
  animation: moveY 0.5s cubic-bezier(0.5, -0.5, 1, 1);
  .iconfont {
    font-size: 25px;
    color: #fece45;
    animation: moveX 0.5s linear;
  }
}
@keyframes moveY {
  to {
    transform: translateY(var(--y));
  }
}
@keyframes moveX {
  to {
    transform: translateX(var(--x));
  }
}
</style>

<style lang="scss" scoped>
.goods {
  height: 585px;
  position: relative;
  .fanhui {
    .icon-fanhui {
      color: #f9fafa;
      font-size: 25px;
      margin-left: 10px;
      position: absolute;
      top: -230px;
    }
  }
  .info_list {
    display: flex;
    .info_list_left {
      background-color: #f7f7f7;
      height: calc(100vh - 257px);
      width: 100px;
      overflow: auto;
      .left_nav {
        width: 100%;
        height: 60px;
        position: relative;
        :deep(.el-badge) {
          position: absolute;
          right: 5px;
          top: 5px;
          .el-badge__content {
            background-color: #eb3434;
          }
        }
        ul > li {
          line-height: 60px;
          text-align: center;
          color: #a5a5a5;
          font-size: 15px;
        }
      }
      .left_nav_active {
        width: 100%;
        height: 60px;
        background-color: #fefefe;
        ul > li {
          line-height: 60px;
          text-align: center;
          color: #323233;
          font-size: 15px;
        }
      }
    }
    .info_list_right::-webkit-scrollbar {
      display: none;
    }
    .info_list_right {
      padding-left: 10px;
      height: calc(100vh - 257px);
      width: calc(100% - 100px);
      overflow: auto;
      scrollbar-width: none;
      -ms-overflow-style: none;
      .right_list {
        padding-bottom: 100px;
        .right_item {
          height: auto;
          .item_title {
            margin-bottom: 10px;
          }
          .item_dish {
            display: flex;
            align-items: center;
            margin-bottom: 5px;
            .dish_left {
              :deep(.el-image) {
                width: 100px;
                height: 100px;
                border-radius: 10px;
                margin-right: 10px;
              }
            }
            .dish_right {
              position: relative;
              width: 100%;
              .right_title {
                font-size: 20px;
                font-weight: bold;
                letter-spacing: 2px;
                color: #2a2a2b;
                margin-bottom: 5px;
                -webkit-line-clamp: 2;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                overflow: hidden;
                text-overflow: ellipsis;
              }
              .right_sale {
                font-size: 15px;
                color: #9f9fa0;
                margin-bottom: 5px;
              }
              .right_price {
                .dishPrice {
                  font-size: 18px;
                  color: #fd4a32;
                  font-weight: bold;
                  margin-bottom: 5px;
                  margin-right: 5px;
                }
                .oldPrice {
                  font-size: 15px;
                  color: #ababab;
                  text-decoration: line-through;
                }
              }
              .right_button {
                .right_button_1 {
                  position: absolute;
                  right: 15px;
                  bottom: 0px;
                  background-color: #fede44;
                  font-size: 13px;
                  padding: 4px 8px 4px 8px;
                  border-radius: 10px;
                  color: #0a0a0a;
                }
                .right_button_2 {
                  position: absolute;
                  right: 15px;
                  bottom: 0px;
                  display: flex;
                  align-items: center;
                  .iconfont {
                    font-size: 25px;
                    color: #fece45;
                  }
                  span {
                    margin-right: 10px;
                    margin-left: 10px;
                  }
                }
              }
              .right_count {
                position: absolute;
                right: 15px;
                bottom: 0px;
                display: flex;
                align-items: center;
                .iconfont {
                  font-size: 25px;
                  color: #fece45;
                }
                span {
                  margin-right: 5px;
                  margin-left: 5px;
                }
              }
            }
          }
        }
      }
    }
  }
  .cart {
    z-index: 9999;
    position: absolute;
    bottom: 30px;
    display: flex;
    align-items: center;
    background-color: #0d0b0c;
    border-radius: 50px;
    width: 350px;
    left: 20px;
    height: 60px;
    .cart_left {
      height: 80px;
      width: 82px;
      margin-left: 20px;
      margin-bottom: 18px;
      margin-right: 10px;
      position: relative;
      :deep(.el-badge) {
        position: absolute;
        right: 66px;
        top: 30px;
        .el-badge__content {
          background-color: #eb3434;
        }
      }
      img {
        height: 100%;
        width: 100%;
      }
    }
    .cart_middle {
      margin-right: 20px;
      .middle_top {
        color: #edeeed;
        font-size: 18px;
        font-weight: 600;
      }
      .middle_bottom {
        color: #959595;
        font-size: 12px;
        letter-spacing: 2px;
      }
    }
    .cart_right {
      margin-left: 10px;
      position: relative;
      flex: 1;
      .right {
        color: #959595;
        font-size: 17px;
      }
      .right_active {
        background-color: #fbc139;
        height: 61px;
        width: 100px;
        position: absolute;
        right: -1px;
        top: -31px;
        border-top-right-radius: 50px;
        border-bottom-right-radius: 50px;
        text-align: center;
        span {
          line-height: 61px;

          color: #3b3a37;
          font-size: 18px;
          font-weight: bold;
        }
      }
    }
  }
  .dialog {
    .el-dialog {
      :deep(.el-dialog) {
        border-radius: 10px;
        widows: 350px;
        .el-dialog__header {
          .el-dialog__title {
            font-weight: bold;
            letter-spacing: 2px;
            font-size: 19px;
          }
        }
      }
      .dialog_item {
        margin-bottom: 40px;
        .dialog_item_title {
          color: #a9a9a9;
          font-size: 15px;
          margin-bottom: 10px;
        }
        .dialog_item_info {
          display: flex;
          flex-wrap: wrap;
          .info_tag {
            margin-right: 10px;
            width: 60px;
            :deep(.el-tag) {
              margin-right: 10px;
              border: 1px solid #f5f6f7;
              background-color: #fefefe;
              color: #343434;
              width: 60px;
              margin-bottom: 10px;
              text-align: center;
            }
          }
          .info_tag_active {
            margin-right: 10px;
            width: 60px;
            :deep(.el-tag) {
              margin-right: 10px;
              border: 1px solid #f5c28c;
              background-color: #fdfaf1;
              color: #ee8a35;
              width: 60px;
              margin-bottom: 10px;
              text-align: center;
            }
          }
        }
      }
      .footer {
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
        position: relative;
        .footer_price {
          .span_1 {
            color: #070707;
            font-size: 16px;
            font-weight: bold;
            margin-right: 10px;
          }
          .span_2 {
            color: #e75e50;
            font-size: 16px;
            font-weight: bold;
          }
          .span_3 {
            color: #e75e50;
            font-size: 20px;
            font-weight: bold;
          }
        }
        .footer_button {
          .footer_button_1 {
            background-color: #f5c558;
            padding: 4px 8px;
            color: #282826;
            font-size: 16px;
            border-radius: 10px;
          }
          .footer_button_2 {
            position: absolute;
            right: 15px;
            bottom: 0px;
            display: flex;
            align-items: center;
            .iconfont {
              font-size: 25px;
              color: #fece45;
            }
            span {
              margin-right: 10px;
              margin-left: 10px;
            }
          }
        }
        .close {
          background-color: transparent;
          color: #fafafa;
          border: 2px solid #fafafa;
          height: 50px;
          width: 50px;
          border-radius: 50px;
          position: absolute;
          top: 80px;
          right: 130px;
          text-align: center;
          line-height: 45px;
          font-size: 40px;
        }
      }
    }
  }
  .shoppingCart {
    height: 844px;
    width: 100%;
    z-index: 999;
    position: absolute;
    top: -275px;
    .shoppingCart_top {
      background-color: transparent;
      height: 400px;
    }
    .shoppingCart_bottom {
      background-color: #fefefe;
      height: 462px;
      border-radius: 10px;

      .bottom_top {
        height: 30px;
        background-color: #f3edd5;
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
      }
      .bottom_bottom {
        padding: 15px;
        .bottom_middle {
          display: flex;
          align-items: center;
          justify-content: space-between;
          border-bottom: 2px solid #f9f4f4;
          padding-bottom: 10px;
          .middle_left {
            color: #4e4e4a;
            font-size: 17px;
          }
          .middle_right {
            color: #8b8b8b;
            font-size: 13px;
            .icon-shanchu {
              margin-right: 5px;
            }
          }
        }
        .bottom_info::-webkit-scrollbar {
          display: none;
        }
        .bottom_info {
          margin-top: 5px;
          height: 280px;
          overflow: auto;
          scrollbar-width: none;
          -ms-overflow-style: none;
          .info_item {
            display: flex;
            padding: 10px;
            align-items: center;
            .item_left {
              margin-right: 10px;
              :deep(.el-image) {
                height: 70px;
                width: 70px;
              }
            }
            .item_right {
              width: 100%;
              position: relative;
              .item_right_title {
                font-size: 17px;
                margin-bottom: 5px;
                letter-spacing: 2px;
                color: #3a3937;
              }
              .item_right_flavore {
                font-size: 12px;
                color: #8f8f8f;
                margin-bottom: 5px;
              }
              .item_right_price {
                font-size: 17px;
                color: #fd4a32;
                font-weight: bold;
                margin-bottom: 5px;
                margin-right: 10px;
              }
              .item_right_count {
                position: absolute;
                right: 0px;
                bottom: 0px;
                display: flex;
                align-items: center;
                .iconfont {
                  font-size: 25px;
                  color: #fece45;
                }
                span {
                  margin-right: 10px;
                  margin-left: 10px;
                }
              }
            }
          }
        }
      }
    }
  }
}
</style>